<style>
    #selectRedPackInfo{
        width: 80vw!important;
        max-width: 1200px!important;
        margin: auto;
    }
    #selectRedPackInfo .panel.panel-default{
        min-height: 500px!important;
        max-height: 80vh!important;
    }
    #selectRedPackInfo .modal-content{
        max-height: 1000px!important;
        max-width: 90vw!important;
    }
</style>
<div class="modal-dialog" id="selectRedPackInfo">
    <div class="modal-content">
        <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button">×</button>
            <h4 class="modal-title">请选择红包</h4>
        </div>
        <div class="modal-body form-horizontal">
            <!-- 搜索 -->
            <div class="form-group">
                <div class="col-sm-10">
                    <input class="form-control" placeholder="红包名称..." id="searchRedPackInput" value=""/>
                </div>
                <div class="btn btn-primary" @click="searchContent()">搜索</div>
            </div>
            <!-- 表格 -->
            <div class="app-table-list">
                <div class="panel panel-default">
                    <table class="table table-hover table-responsive table-bordered">
                        <thead>
                            <tr>
                                <th class="text-center">红包名称</th>
                                <th class="text-center">红包金额 / 使用条件</th>
                                <th class="text-center">总数量 / 已领数量</th>
                                <th class="text-center">每人限领</th>
                                <th class="text-center">使用期限</th>
                                <th class="text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody class="text-center" id="selectUserList">
                            <tr v-for="(item,index) in list" :key="index">
                                <td>{{ item.title }}</td>
                                <td>
                                    <span v-if="item['full_money'] > 0">{{ item.cut_money }}元 / 满{{ item.full_money }}.元可用</span>
                                    <span v-else>{{ item.cut_money }}元 / 无门槛</span>
                                </td>
                                <td>{{ item.all_count }} / {{ item.get_count }}个</th>
                                <td>{{ item.limit_count }}</td>
                                <td>{{ item.usetime_text }}</td>
                                <td>
                                    <a href="javascript:;" class="btn btn-sm btn-warning selectedRedPack"
                                       :data-id="item.id"
                                       :data-name="item.title"
                                    >选择</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 分页信息 -->
            <div class="app-table-foot clearfix">
                <div class="pull-left"></div>
                <div class="pull-right">
                    <!-- 分页 -->
                    <div class="pager-content">
                        <ul class="pagination pagination-centered" v-if="total_page > 1">
                            <!--分页前导-->
                            <li v-if="page > 1">
                                <a href="javascript:;" @click="paging(1)">首页</a>
                            </li>
                            <li v-if="page > 1">
                                <a href="javascript:;" @click="paging(parseInt(page) - 1)">&laquo;上一页</a>
                            </li>
                            <!--分页中间内容-->
                            <li v-for="index in total_page"
                                v-if="(index >= (parseInt(page) - 2) && index <= (parseInt(page) + 2)) || (index <= 5 && total_page < 3)"
                                :class="{active: (page == index)}">
                                <a href="javascript:;" @click="paging(index)">{{index}}</a>
                            </li>
                            <!--分页后导-->
                            <li v-if="page < total_page">
                                <a href="javascript:;" @click="paging(parseInt(page)+1)">下一页&raquo;</a>
                            </li>
                            <li v-if="page < total_page">
                                <a href="javascript:;" @click="paging(total_page)">尾页</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#selectRedPackInfo",
        data: {
            //当前页
            page: 1,
            //总页数
            total_page: 1,
            //红包列表
            list: {},
            //搜索
            search:'',
        },
        methods: {
            //获取列表信息
            getList() {
                let _this = this,
                    link = biz.url('utility/select/selectRedPack');
                $.post(link, {page:_this.page,name:_this.search}, function (res) {
                    if(res.errno === 0){
                        let data = res.data;
                        _this.list = data.list;
                        _this.total_page = data.total;
                        _this.$forceUpdate();
                    }else{
                        tip.alert(res.message);
                    }
                }, 'json');
            },
            //分页操作
            paging(page){
                this.page = page;
                this.getList();
            },
            //搜索操作
            searchContent(){
                //获取内容
                this.search = $("#searchRedPackInput").val();
                if(!this.search) {
                    tip.alert("请输入搜索内容！");
                    return false;
                }
                this.page = 1;
                //开始请求
                this.getList();
            },
        },
        mounted() {
            this.getList();
        }
    });
</script>